<template>
	<view class="">
		<u-navbar title="骑行活动" :autoBack="true" :placeholder="true"></u-navbar>



		<view class="">
			<view class="img-box">
				<image :src="content.p1_image" class="ac-img" mode="widthFix"></image>
			</view>
		</view>

		<view class="wq-list">
			<view class="ac-item" v-for="item in list" key="index" @click="navigateTo" 
				data-url="/subPages/activityDetail/activityDetail">
				<image :src="item.p1_image" class="item-img"></image>
				<view class="launch_start">
					{{item.launch_start}}
				</view>
			</view>
		</view>

		<view class="btn-box">
			<view class="btn" @click="navigateTo" data-url="/subPages/activityApply/activityApply">
				我要报名
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: {},
				list: []
			}
		},

		onLoad() {
			this.activity();
		},

		methods: {
			async activity() {
				let res = await this.$api.activityList();

				console.log(res);

				this.content = res.data[0];
				this.list = res.data.slice(1);

				console.log(this.content)
			},
			// 跳转函数
			navigateTo(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.img-box {
		padding: 0 20rpx;
	}

	.ac-img {
		width: calc(100vw - 40rpx);
	}

	.item-img {
		width: 45vw;
		height: 65vw;
	}

	.wq-list {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.ac-item {
		background-color: white;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.launch_start {
		line-height: 60rpx;
	}

	.btn {
		margin: 0rpx auto;
		width: calc(100vw - 40rpx);
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 600rpx;
		opacity: 1;
		background: $boxBg;
		color: #FFFFFF;
		bottom: 100rpx;
		left: 20rpx;
		margin-top: 16rpx;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		background-color: white;
		height: 120rpx;
		width: 100%;
	}
</style>